<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
  <link href="/lib/layui-v2.6.3/css/layui.css" rel="stylesheet">
  <style>
    .layui-table-cell{
      text-align:center;
      height: auto;
      white-space: normal;
    }
  </style>
</head>
<body>
<div class="layuimini-main">
  <fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
      <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">用户姓名</label>
            <div class="layui-input-inline">
              <input id="input1" type="text" name="username" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">用户性别</label>
            <div class="layui-input-inline">
              <input type="text" id="input2" name="sex" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">用户状态</label>
            <div class="layui-input-inline">
              <select id="select1" name="status" lay-verify="">
                <option value="启用">启用</option>
                <option value="禁用">禁用</option>
                <option value="" selected>全部</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <input id="searchBtn" type="button" value="搜索" class="layui-btn">
            <input id="addBtn" type="button" value="添加用户" class="layui-btn">
          </div>
        </div>
      </form>
    </div>
  </fieldset>

  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="close"> 禁用 </button>
      <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="open"> 启用 </button>
    </div>
  </script>
</div>
<table id="memberTable"  lay-filter="table1"></table>

<script type="text/html" id=operateTemplate>

  <input type="button" class="layui-btn layui-btn-xs" value="编辑" lay-event="edit">
  <input type="button" class="layui-btn layui-btn-xs layui-btn-danger" value="删除" lay-event="del">
  <input type="button" class="layui-btn layui-btn-xs layui-btn-danger" value="重置密码" lay-event="chongzhi">
</script>
<script id="memberTemplate" type="text/html">
  <form class="layui-form" lay-filter="memberForm">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="hidden" name="id"/>
        <input type="hidden" name="action" value="save"/>
        <input type="text" name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">昵称</label>
      <div class="layui-input-inline">
        <input type="text" name="name" autocomplete="off" placeholder="请输入昵称" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline">
        <input type="password" name="password" id="password" autocomplete="off" placeholder="请输入密码"
               class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男">
        <input type="radio" name="sex" value="女" title="女" checked>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">手机号</label>
      <div class="layui-input-inline">
        <input type="text" name="phone" autocomplete="off" placeholder="请输入手机号" class="layui-input">
      </div>
    </div>
    <!--<div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-inline">
            <button id="avatar" type="button" class="layui-btn" >浏览</button>
            <input type="text" id="aaaa" name="avatar" autocomplete="off" placeholder="" class="layui-input">
        </div>
    </div>-->
    <div class="layui-form-item">
      <label class="layui-form-label">头像</label>
      <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传头像</button>

        <div style="margin: 10px 10px 10px 110px" class="layui-upload-list">
          <img width="95px" height="95px" class="layui-upload-img" id="demo1">
          <p id="demoText"></p>
        </div>
        <div style="width: 95px; margin: 10px 10px 10px 110px;" >
          <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent=""></div>
          </div>
        </div>
        <input type="hidden" id="aaaa" name="avatar" autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button id="saveBtn" type="button" class="layui-btn" >立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>

</script>

<script src="/lib/layui-v2.6.3/layui.js"></script>
<script src="/js/lay-config.js"></script>
<script th:inline="none" type="text/javascript">

  layui.use(["table", "layer", "laydate", "form","upload","common","element"], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var form = layui.form;
    var upload=layui.upload;
    var element=layui.element;

    $("#addBtn").on("click", function () {
      layer.open({
        type: 1,
        area: ["400px", "320px"],
        title: "新增用户",
        content: $("#memberTemplate").html()
      });
      form.render();
      /*upload.render({
          elem:"#avatar",
          url: "/member/avatar",
          done:function (data){
              $("#aaaa").val(data.data.avatar);
          }
      });*/
      var uploadInst = upload.render({
        elem: '#test1'
        ,url: '/member/avatar' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#demo1').attr('src', result); //图片链接（base64）
          });

          element.progress('demo', '0%'); //进度条复位
          layer.msg('上传中', {icon: 16, time: 0});
        }
        ,done: function(res){
          //如果上传失败
          if(res.code > 0){
            return layer.msg('上传失败');
          }
          //上传成功的一些操作

          $("#aaaa").val(res.data.avatar);

          //……
          $('#demoText').html(''); //置空上传失败的状态
        }
        ,error: function(){
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
          });
        }
        //进度条
        ,progress: function(n, elem, e){
          element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
          if(n == 100){
            layer.msg('上传完毕', {icon: 1});
          }
        }
      });
    });

    $("body").on("click", "#saveBtn", function () {
      var data = form.val("memberForm");
      //console.log(data);
      if(data.username==null||data.username==""){
        layer.msg("用户名不能为空");
        return false;
      };
      $.post("/member/save", data, function (result) {
        if(result.code==0){
          layer.closeAll();
          layer.msg(result.msg);
          $("#searchBtn").click();
        }else{
          layer.closeAll();
          layer.msg(result.msg);
        }
      });
    });
    $("#searchBtn").on("click", function () {
      table.render({
        elem: "#memberTable",
        toolbar: '#toolbarDemo',
        url: "/member/list",
        /*done: function(res, curr, count){
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            console.log(res);

            //得到当前页码
            console.log(curr);

            //得到数据总量
            console.log(count);
        },*/
        where: {keyword: $("#input1").val(), sex: $("#input2").val(),status:$("#select1").val()},
        cols: [ [
          {type: "checkbox", width: 50},
          {
            title: "头像",
            field: "avatar",
            templet:function (d) {
              // console.log(d.avatar)
              if (d.avatar!=null){
                return '<img src="'+d.avatar+'" style="height: 50px;width: 50px"/>'
              }else {
                return '<img src="" style="height: 50px;width: 50px"/>'
              }
            },
            align: "center"
          },
          {
            title: "ID",
            field: "id"
          }, {
            title: "昵称",
            field: "name"
          }, {
            title: "用户名",
            field: "username"
          },/* {
                        title: "密码",
                        field: "password"
                    },*/{
            title: "性别",
            field: "sex"
          },{
            title: "手机号",
            field: "phone"
          },{
            title: "状态",
            field: "status"
          },
          {title: '操作', toolbar: '#operateTemplate', align: "center"}
        ] ],
        page: true,
        limit:5,
        limits: [5, 10, 15, 20],
        skin: 'line'
      });
    });
    //用代码点了一下搜索
    $("#searchBtn").click();

    table.on('toolbar(table1)', function (obj) {
      if (obj.event === 'open') {  // 监听添加操作
        var checkStatus = table.checkStatus('memberTable')
                ,data = checkStatus.data;
        var ids=[];
        $.each(data,function(i,v) {
          ids[i]=v.id;
        });
        console.log(ids);
        $.post("/member/openMember", {ids:ids}, function () {
          layer.closeAll();
          $("#searchBtn").click();
        });
      } else if (obj.event === 'close') {  // 监听删除操作
        var checkStatus = table.checkStatus('memberTable')
                ,data = checkStatus.data;
        var ids=[];
        $.each(data,function(i,v) {
          ids[i]=v.id;
        });
        console.log(ids);
        $.post("/member/closeMember", {ids:ids}, function () {
          layer.closeAll();
          $("#searchBtn").click();
        });

      }
    });


    table.on("tool(table1)", function (obj) {
      if (obj.event == "edit") {
        $.get("/member/selectById?id=" + obj.data.id, function (m) {
          if (m.code == 0) {
            layer.open({
              type: 1,
              area: ["400px", "320px"],
              title: "编辑用户",
              content: $("#memberTemplate").html()
            });

            var uploadInst = upload.render({
              elem: '#test1'
              ,url: '/member/avatar' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
              ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                  $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
              }
              ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                  return layer.msg('上传失败');
                }
                //上传成功的一些操作

                $("#aaaa").val(res.data.avatar);

                //……
                $('#demoText').html(''); //置空上传失败的状态
              }
              ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                  uploadInst.upload();
                });
              }
              //进度条
              ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                  layer.msg('上传完毕', {icon: 1});
                }
              }
            });

            form.val("memberForm", m.data);
            $("#password").attr("disabled",true);
            $("#demo1").attr("src",m.data.avatar)
          } else {
            layer.msg(m.msg);
          }
        });
      }

      if (obj.event == "del") {
        layer.confirm("您确定要删除此用户吗？", function () {
          $.post("/member/delete", {id:obj.data.id}, function () {
            layer.closeAll();
            $("#searchBtn").click();
          });
        });
      }
      if (obj.event == "chongzhi") {
        layer.confirm("您确定要重置此用户密码吗？", function () {
          $.post("/member/updateMima", {id:obj.data.id}, function (m) {

            layer.closeAll();
            layer.msg(m.msg);
            $("#searchBtn").click();
          });
        });
      }
    })
  });
</script>
</body>
</html>